{% load static %}
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <title>抖查查测试平台</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->

</head>
<body>

<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
    <h5 class="my-0 mr-md-auto font-weight-normal"></h5>
    <a class="btn btn-outline-primary" href="/polls/app_case/">返回</a>
</div>
<div class="row">
    <div class="col-xs-6 col-md-4"></div>
    <div class="col-xs-6 col-md-4 text-center"><h4>测试报告</h4><h6>{{ Data_time }}</h6></div>
    <div class="col-xs-6 col-md-4"></div>
</div>
<div class="col-20 form-group" style="border-bottom: 1px solid #000000"></div>
<div class="row well">
    <div class="col-xs-6 col-md-4 text-center"><a class="text-muted">测试数量:{{ Mobile_phone_brands_count }}</a></div>
    <div class="col-xs-6 col-md-4 text-center"><a class="text-muted">影响用户最多的问题有:{{ error }}</a></div>
    <div class="col-xs-6 col-md-4 text-center"><a class="text-muted">覆盖机型:{{ Mobile_phone_brands }}</a></div>
</div>
<div class="row well">
    <div class="col-xs-6 col-md-4 text-center"><a>测试通过率</a></a>
        <div id="phone_pass" style="width: 500px;height:200px;"></div>
    </div>
    <div class="col-xs-6 col-md-2 text-center"></div>
    <div class="col-xs-6 col-md-4 text-center"><a>问题汇总</a>
        <div id="error" style="width: 500px;height:200px;"></div>
    </div>
</div>
<div class="row well">
    <div class="col-xs-6 col-md-4 text-center"><a class="text-muted">问题系统:{{ Android_version }}</a></div>
    <div class="col-xs-6 col-md-4 text-center"><a class="text-muted">问题分辨率:{{ phone_px }}</a></div>
    <div class="col-xs-6 col-md-4 text-center"><a class="text-muted">报错次数:{{ Collapse_count }}</a></div>
</div>

<div class="row well">
    <div class="col-xs-6 col-md-4 text-center"><a>热启动耗时</a></a>
        <div id="time_h" style="width: 600px;height:300px;"></div>
    </div>
    <div class="col-xs-6 col-md-2 text-center"></div>
    <div class="col-xs-6 col-md-4 text-center"><a>冷启动耗时</a>
        <div id="time_c" style="width: 600px;height:300px;"></div>
    </div>
</div>
<div class="row well">
    <div class="col-xs-6 col-md-4 text-center"><a>CPU占比</a></a>
        <div id="phone_cpu" style="width: 600px;height:300px;"></div>
    </div>
    <div class="col-xs-6 col-md-2 text-center"></div>
    <div class="col-xs-6 col-md-4 text-center"><a>内存占比</a>
        <div id="ram" style="width: 600px;height:300px;"></div>
    </div>
</div>
{#         <div class="row well text-center">#}
<table data-table class="table table-hover">
    <thead>
    <tr bgcolor="#d1ecf1">
        <th class='text-center text-muted'>机型</th>
        <th class='text-center text-muted'>报告详情</th>
    </tr>
    </thead>
    <tbody>
    {% for keys, row in caseapi_return.equipment.items %}
        <tr class="">
            {% for key, value in row.items %}
                {% if key == 'go' %}
                    <td class='text-center'>
                        <a class=' text-center editcase_id={{ value }}'
                           href="/polls/case_app_report/?appreport_key={{ appreport_key }}&value={{ value }}"
                           name={{ value }} report_id={{ value }}>查看</a>
                    </td>
                {% else %}
                    <td class='text-center'>
                        "{{ value }}"
                    </td>
                {% endif %}
            {% endfor %}
        </tr> {% endfor %}
    </tbody>
</table>
{#        </div>#}
<div class="row well">

</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    // 绘制图表。
    echarts.init(document.getElementById('phone_pass')).setOption({

        series: {
            color: ['#17a2b8', '#20c997', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53', '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c', '#f49f42'],
            type: 'pie',
            data: [
                {name: '通过{{ phone_pass_z }}%', value: {{ phone_pass_z }}},
                {name: '失败{{phone_error_z}}%', value: {{phone_error_z}}}
            ]
        }
    });
</script>
<script>
    // 绘制图表。
    echarts.init(document.getElementById('error')).setOption({

        series: {
            color: ['#17a2b8', '#20c997', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53', '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c', '#f49f42'],
            type: 'pie',
            data: [
                {name: '报错{{ Collapse_count }}个', value: {{ Collapse_count }}},
                {name: '安装{{Install_count}}个', value: {{Install_count}}},
                {name: '卸载{{Uninstall_count}}个', value: {{Uninstall_count}}}
            ]
        }
    });
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('time_h'));

    // 指定图表的配置项和数据
    var option = {
        'color': ['#17a2b8', '#20c997', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53', '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c', '#f49f42'],
        'title': {},
        'tooltip': {},
        'legend': {},
        'xAxis': {
            'data': []
        },
        'yAxis': {},
        'series': [{
            'name': '最长耗时：{{ time_h_sorted }}ms',
            'type': 'bar',
            'data': []
        }]
    };
    {% for item in time_h_y %}
        option['series'][0]['data'].push("{{ item }}");
    {% endfor %}
    {% for item in time_h_x %}
        option['xAxis']['data'].push("{{ item }}");
    {% endfor %}
    console.log(option)

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('time_c'));


    // 指定图表的配置项和数据
    var option = {
        'color': ['#17a2b8', '#20c997', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53', '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c', '#f49f42'],
        'title': {},
        'tooltip': {},
        'legend': {},
        'xAxis': {
            'data': []
        },
        'yAxis': {},
        'series': [{
            'name': '最长耗时：{{ time_c_sorted }}ms',
            'type': 'bar',
            'data': []
        }]
    };
    {% for item in time_c_y %}
        option['series'][0]['data'].push("{{ item }}");
    {% endfor %}
    {% for item in time_c_x %}
        option['xAxis']['data'].push("{{ item }}");
    {% endfor %}

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('phone_cpu'));
    // 指定图表的配置项和数据
    var option = {
        'color': ['#17a2b8', '#20c997', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53', '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c', '#f49f42'],
        'title': {},
        'tooltip': {},
        'legend': {},
        'xAxis': {
            'data': []
        },
        'yAxis': {},
        'series': [{
            'name': '最大占用：{{ phone_cpu_sorted }}%',
            'type': 'bar',
            'data': []
        }]
    };
    {% for item in phone_cpu_y %}
        option['series'][0]['data'].push("{{ item }}");
    {% endfor %}
    {% for item in phone_cpu_x %}
        option['xAxis']['data'].push("{{ item }}");
    {% endfor %}
    console.log(option)

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('ram'));

    // 指定图表的配置项和数据
    var option = {
        'color': ['#17a2b8', '#20c997', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53', '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c', '#f49f42'],
        'title': {},
        'tooltip': {},
        'legend': {},
        'xAxis': {
            'data': []
        },
        'yAxis': {},
        'series': [{
            'name': '最大占用：{{ phone_dumpsys_sorted }}%',
            'type': 'bar',
            'data': []
        }]
    };
    {% for item in phone_dumpsys_y %}
        option['series'][0]['data'].push("{{ item }}");
    {% endfor %}
    {% for item in phone_dumpsys_x %}
        option['xAxis']['data'].push("{{ item }}");
    {% endfor %}
    console.log(option)

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

</body>
</html>
